<template>
    <view class="confirm-order bg-active-color">
        
        <!-- 地址 -->
        <view class="order-map" v-if="hasAdree">
            <view class="map-title">
                <view class="map-name">
                    收件人: {{address.person}}
                </view>
                <view class="">
                   {{address.phone}}
                </view>
            </view>
            <view class="map-add">
                收货地址: {{address.userNation}} {{address.userProvince}} {{address.userCity}}  {{address.userCounty}} {{address.detailedAddress}}
            </view>
        </view>
		<view class="order-map" v-else>
			<text @click="setAddress()">设置默认收货地址</text>
		</view>
        
        <!-- 商品 -->
        <view class="goods-list" v-for="(item,index) in cartList">
            
            <view class="goods-content bg-active-color">
                <image class="goods-img" :src="item.goodsHeader" mode=""></image>
                <view class="goods-text">
                    <view class="goods-name">
                        {{ item.painterName }}: {{ item.goodsName }}
                    </view>
                    <view class="goods-size f-color">
                        {{ item.goodsPrice }}
                    </view>
                    <view class="f-active-color">
                        7天无理由退货
                    </view>
                </view>
                <view class="">
                    <view class="">
                         ￥{{ item.goodsPrice }}
                    </view>
                    <view class="goods-size">
                        x {{ item.goodsNum }}
                    </view>
                </view>
            </view>
            
        </view>
    
        <!-- 底部:提交订单 -->
        <view class="order-foot">
            <view class="total-price">
                合计: <text class="f-active-color">{{totalPrice}}元</text>
            </view>
            <view class="confirm" @click="commitOrder()">
                提交订单
            </view>
        </view>
	
	<view class="bottom_foot"></view>
	<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
    </view>
</template>

<script>
import global from '@/global.js'

export default {
	data() {
		return {
			//当前选项
			currentTab:'/pages/orderList/orderVerify',
			address:'',
			hasAdree:false,
			cartList:[],
			param:'',
			flag:'',
		};
	},
	computed:{
		totalPrice() {
			let totalPrice = 0
			this.cartList.map(item => {
				totalPrice += item.goodsNum*item.goodsPrice
			})
			
			return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
		}
	},
	methods:{
		commitOrder(){
			
			if(!this.hasAdree){
				uni.showToast({ title: "请设置收获地址", icon: 'none' });
				return
			}
			var token = uni.getStorageSync("token")
			console.log("order verify  token value :  ", token)
			console.log("order verify  this.flag value :  ", this.flag)
			
			if(this.flag==0){ //购物车购买
				 this.mall(this.param, 'api/order/create',token);
			}
			if(this.flag==1){ //立即购买
				 this.mall(this.param, 'api/order/createOnce',token);
			}
			
		},
		mall(paramVal, url, token){
			uni.request({
				url: global.baseUrl + url, // 接口地址
				method:'get',
				dataType: "json",
				data:{
					ids: paramVal
				},
				header: {
				  'X-Token': token
				},
				success: (res) => {
					if(res.data.code==0){
						console.log("request data :  ", res)
						console.log("request serialNo data :  ", res.data.data.serialNo)
						console.log("request orderAmount data :  ", res.data.data.orderAmount)
						
						uni.navigateTo({ 
						  url: '../orderList/payOrder?serialNo=' + res.data.data.serialNo +  '&amount=' + res.data.data.orderAmount,
						})
						
					}else{
						console.log("request result error: " ,res.data.code)
					} 
				},
				fail: (error) => {
				  console.log(error)
				}
			})
		},
		fetchData(param,url) {
		  var token = uni.getStorageSync("token")
		  console.log("order verify  token value :  ", token)
		  uni.request({
			url: global.baseUrl + url , // 接口地址
			method:'get',
			dataType: "json",
			data:{
				ids:param
			},
			header: {
			  'X-Token': token
			},
			success: (res) => {
				if(res.data.code==0){
					this.hasAdree=res.data.data.hasAdree
					this.address=res.data.data.address
					this.cartList=res.data.data.list
				}else{
					console.log("request result error: " ,res.data.code)
				} 
			},
			fail: (error) => {
			  console.log(error)
			}
		  })
		},
		setAddress(){
			uni.reLaunch({url: '/pages/myMain/myAddressList'});
		}
	},
	onLoad(option) {
		console.log("ooption.flagnLoad option flag :   ", option.flag, option)
		this.flag= option.flag
		
		if(option.flag==0){
			this.param=option.param
			// 在页面加载时调用fetchData方法获取数据,加入购物车，订单确认 
			this.fetchData(option.param,'api/order/verify') 
		}
		else if(option.flag==1){
			this.param=option.id
			// 在页面加载时调用fetchData方法获取数据，立即购买，订单确认
			this.fetchData(option.id,'api/order/atOnce') 
		}
		
	}
}
</script>

<style lang="less">
.confirm-order{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.order-map{
	margin-top: 10rpx;
    margin-bottom: 10rpx;
    padding: 20rpx;
    background-color: #fff;
    line-height: 50rpx;
	background-color: #f8f8f8;
}
.map-title{
    display: flex;
    justify-content: space-between;
}
.map-name{
    font-weight: bold;
}
.goods-list{
    background-color: #fff;
    padding: 10rpx 0;
}

.goods-content{
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
	background-color: #f8f8f8;
}
.goods-text{
    width: 360rpx;
    padding: 0 10rpx;
    font-size: 26rpx;
}
.goods-img{
    width: 160rpx;
    height: 160rpx;
}
.goods-size{
    font-size: 24rpx;
}

.order-foot{
    width: 100%;
    height: 80rpx;
    position: fixed;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.confirm{
    color: #fff;
    background-color: #49bdfb;
    padding: 10rpx 30rpx;
}

.total-price{
    padding: 0 20rpx;
}

.bottom_foot{
	height: 120rpx;
	margin-top: 300rpx;
}

</style>

